/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
  <m-list-construction title="统计概览">
    <template slot="content">

      <div class="perject-home-content">
        <taskMonthCount></taskMonthCount>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="title">
              <span>{{ $t("Task status statistics") }}</span>

            </div>
            <el-card
              shadow="never"
              body-style="height:360px;"
            >
              <m-task-status-count :search-params="searchParams">
              </m-task-status-count>
            </el-card>
          </el-col>

          <el-col :span="12">
            <div class="title">
              <span>{{ $t("Process Status Statistics") }}</span>
              <el-date-picker
                v-model="dataTime"
                type="datetimerange"
                size="mini"
                @change="_datepicker"
                range-separator="-"
                :start-placeholder="$t('startDate')"
                :end-placeholder="$t('endDate')"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width:200px;"
              >
              </el-date-picker>
            </div>
            <el-card
              shadow="never"
              body-style="height:360px;"
            >
              <m-process-state-count :search-params="searchParams">
              </m-process-state-count>
            </el-card>
          </el-col>
        </el-row>
      </div>

    </template>
  </m-list-construction>
</template>

<script>
  import { mapState } from 'vuex'
  import dayjs from 'dayjs'
  import mTaskStatusCount from './_source/taskStatusCount.vue'
  import mProcessStateCount from './_source/processStateCount'
  import taskMonthCount from './_source/taskMonthCount'
  import mListConstruction from '@/module/components/listConstruction/listConstruction'

  export default {
    name: 'statistics',
    data () {
      return {

        searchParams: {
          projectCode: null,
          startDate: '',
          endDate: ''
        },
        dataTime: []

      }
    },
    props: {},
    methods: {
      // ...mapActions('monitor', ['getDatabaseData'])
      // ...mapActions('projects', ['getCommandStateCount']),

      _datepicker (val) {
        this.searchParams.startDate = val[0]
        this.searchParams.endDate = val[1]
      }
    },
    watch: {},
    created () {
      this.searchParams.projectCode =
        this.$route.params.projectCode == null
          ? 0
          : this.$route.params.projectCode
      this.dataTime[0] = dayjs().format('YYYY-MM-DD 00:00:00')
      this.dataTime[1] = dayjs().format('YYYY-MM-DD HH:mm:ss')
      this.searchParams.startDate = this.dataTime[0]
      this.searchParams.endDate = this.dataTime[1]
    },
    mounted () {
    },
    components: {
      mListConstruction,
      mTaskStatusCount,
      mProcessStateCount,
      taskMonthCount
    },
    computed: {
      ...mapState('dag', ['projectName'])
    }
  }

</script>
<style lang="scss" rel="stylesheet/scss">
.perject-home-content {
  // padding: 20px 0px;
  padding-bottom: 20px;
  position: relative;
  .time-model {
    .ans-input {
      > input {
        width: 344px;
      }
    }
  }
  .title {
    font-size: 18px;
    font-weight: 600;
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .chart-title {
    text-align: center;
    height: 60px;
    line-height: 60px;
    span {
      font-size: 22px;
      color: #333;
      font-weight: bold;
    }
  }
}
.table-small-model {
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
}
</style>
